<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../static/layui/dist/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../static/layui/dist/layuiadmin/style/admin.css" media="all">

  <script src="../js/jquery.min.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="demoTable">
  搜索ID：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="demo"></table>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../../../static/layui/dist/layuiadmin/layui/layui.all.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;

  

  //方法级渲染
  table.render({
    elem: '#LAY_table_user'
    ,url: 'portpage'
    ,cols:[[
        {field:'id', title:'ID', width:100, unresize: true, sort: true},
        {field:'user_id',title:'员工姓名',width:120,sort:true},
        {field:'report',title:'工作报告',width:200,sort:true},
        {field:'created_time',title:'报告时间',width:200,sort:true},
        {field:'updated_time',title:'修改时间',width:200,sort:true}, 
        {field: 'right', title: '操作', width: 300, toolbar: "#barDemo" }
        ]]
    ,id: 'testReload'
    ,page: true
    ,height: 310
  });

  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.confirm('真的删除行么', function(index){
          

          obj.del();
          layer.close(index);


        });
      // layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', {icon: 3, title:'提示'},function(index){
        
        obj.del();
        layer.close(index);
        

        
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });


  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');

      //执行重载
      table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key: {
            id: demoReload.val()
          }
        }
      });
    }
  };


  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('report');
    console.log(type)
    active[type] ? active[type].call(this) : '';
  });
});
</script>


</body>
</html>